// 有状态组件 类组件
import React from 'react';

// 1. 创建一个名称扩展为 React.Component 的ES6 类
// 2. 创建一个叫做render()的空方法
// 3. 将函数体移动到 render() 方法中
// 4. 在 render() 方法中，使用 this.props 替换 props
// 5. 删除剩余的空函数声明
// 6. 为当前组件添加一个局部状态
// 7. 将this.props换成this.state
// 8. 给组件添加生命周期
// 9. 编写一个tick的函数,里面设定定时器,并且更新时间
// 10. 在componentDidMount中调用tick函数
// 11. 在componentWillUnmount这个钩子中卸载定时器

class ClockB extends React.Component {
    constructor(){
        super()
        this.state = {
            // 这个叫声明状态
            date:new Date()
        }
    }
    tick(){
        // 变更状态要调用setState
        this.interval = setInterval(() => {
            this.setState({
                date:new Date()
            })
        },1000)
    }
    // 组件挂载完毕
    componentDidMount() {
        this.tick()
    }
    // 组件即将卸载
    componentWillUnmount() {
        // 清除定时器
        clearInterval(this.interval)
    }
    render() {
        return(
            <fieldset>
                <legend>ClockB</legend>
                <h1>hello word!</h1>
                <h2>IS now{this.state.date.toLocaleTimeString()}</h2>
            </fieldset>
        )
    }
}

export default ClockB;